<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>洪信主页</title>
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=LAGGITO2icd8dcHuej2hA1j1OhamtUP0"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

    <style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
        }
        #container {
            height: 600px;
        }
    </style>
</head>

<body>
 <div id="container"></div>


<script type='text/javascript'>
//需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js
var map = new BMap.Map("container",{ minZoom : 5,maxZoom:20 }); // 创建地图实例
//设置个性化样式
map.setMapStyle({
      styleJson:  [{
            "featureType": "road",
            "elementType": "all",
            "stylers": {
                    "color": "#ffffff",
                    "visibility": "off"
                   }
            }]
});

map.enableScrollWheelZoom();
map.enableDragging();
map.disableDoubleClickZoom();

var blist = [];
var districtLoading = 0;

/*
=====获取行政区域边界=====
*/
function getBoundary() {
    addDistrict("辽宁省");
    addDistrict("河北省");
    addDistrict("陕西省");
    addDistrict("江西省");
    addDistrict("石家庄");
    addDistrict("青岛");
}

/*
=====添加行政区域=====
*/
function addDistrict(districtName) {
    //使用计数器来控制加载过程
    districtLoading++;
    var bdary = new BMap.Boundary();
    bdary.get(districtName, function (rs) {       //获取行政区域
        var count = rs.boundaries.length; //行政区域的点有多少个
        for (var i = 0; i < count; i++) {
            blist.push({ points: rs.boundaries[i], name: districtName });
        };
        //加载完成区域点后计数器-1
        districtLoading--;
        if (districtLoading == 0) {
            //全加载完成后画端点
            drawBoundary();
        }
    });
}

/*
=====点击行政区域事件=====
*/
function click(evt) {
    alert(evt.target.name);
}
/*
=====绘制边界=====
*/
function drawBoundary() {
    //包含所有区域的点数组
    var pointArray = [];
    //循环添加各闭合区域
    for (var i = 0; i < blist.length; i++) {
        //添加多边形层并显示
        var ply = new BMap.Polygon(blist[i].points, {
                                          strokeWeight: 1,   //边框宽度
                                          trokeColor: "#014F99",   //边框颜色
                                          fillColor: " #DDE4F0" //填充颜色
                                       }); //建立多边形覆盖物
        ply.name = blist[i].name;
        ply.addEventListener("click", click);
        map.addOverlay(ply);

        //将点增加到视野范围内
        var path = ply.getPath();
        pointArray = pointArray.concat(path);
    }

    //限定显示区域(只显示特定区域，鼠标拖动松开后自动回到显示范围内)，需要引用api库
   // var boundply = new BMap.Polygon(pointArray);
   // BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
    map.setViewport(pointArray);    //调整视野
}

setTimeout(function () {
    getBoundary();
}, 100);
</script>
</body>
</html>
